<template>
    <div style="width: 1000px;height: 600px;" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
onMounted(() => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let chartIcon = ``
    let option = {
        backgroundColor: "#000",
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: "rgba(255,255,255,.5)",
                }
            },
            backgroundColor: "rgba(255,255,255,0)",
            borderColor: 'rgba(255,255,255,0)',
            textStyle: {
                color: "rgba(255,255,255,0)"
            },
            formatter: () => {
                return ``;
            }
        },
        grid: {
            containLabel: true,
            right: '5%',
            left: '5%',
            bottom: '0%',
            top: '10%',
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
                lineStyle: {
                    color: "#16323d"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: "#fff",
                fontSize: 18,
                margin: 15
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#182828'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#16323d"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: "#c7dfe9",
                fontSize: 12
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#182828'
                }
            }
        },
        color: [
            '#23B3F7'
        ],
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                //要把折线图的拐点symbol隐藏掉；鼠标悬浮时会显示；label也会在有symbol的点展示
                showSymbol: false,
                z: 100,
                label: {
                    show: true,
                    position: "top",
                    distance: 10,
                    formatter: (fparam) => {
                        console.log(fparam);
                        return `{a|${fparam.value}}`;
                    },
                    rich: {
                        a: {
                            backgroundColor: {
                                image: chartIcon
                            },
                            width: 67,
                            height: 34,
                            align: 'center',
                            color: '#fff'
                        }
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#23B3F7' // 0% 处的颜色
                        }, {
                            offset: .9, color: '#23B3F700' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
        ]
    }
    myChart.setOption(option)
})
</script>